<template>
	<div>
		<CategorySelector />
		<el-card style="margin-top: 10px">
			<div v-if="isShowAttrList">
				<el-button
					type="primary"
					:disabled="!categoryStore.category3Id"
					:icon="Plus"
					@click="toAddAttrInfo"
					>添加属性</el-button
				>
				<el-table border :data="attrList" style="margin-top: 10px">
					<el-table-column
						label="序号"
						type="index"
						width="80"
						align="center"
					></el-table-column>
					<el-table-column
						label="属性名称"
						prop="attrName"
						width="160"
					></el-table-column>
					<el-table-column label="属性值列表">
						<template v-slot="{ row }">
							<el-tag
								type="info"
								v-for="attrValue in row.attrValueList"
								:key="attrValue.id"
								style="margin-right: 5px"
								>{{ attrValue.valueName }}</el-tag
							>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template v-slot="{ row }">
							<!-- 编辑 -->
							<el-button
								title="编辑"
								type="warning"
								size="small"
								:icon="Edit"
								@click="toEditAttrInfo(row)"
							></el-button>

							<!-- 删除 -->
							<el-popconfirm
								confirm-button-text="确定"
								cancel-button-text="取消"
								:icon="InfoFilled"
								icon-color="#626AEF"
								title="确定要删除此条属性吗?"
								@confirm="confirmEvent(row.id)"
								@cancel="cancelEvent"
							>
								<template #reference>
									<el-button
										title="删除"
										type="danger"
										size="small"
										:icon="Delete"
									></el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-else>
				<el-form :model="attrInfo" class="demo-form-inline">
					<el-form-item label="属性名">
						<el-input
							v-model="attrInfo.attrName"
							placeholder="请输入属性名"
							style="margin-left: 10px; width: 200px"
						/>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							:disabled="!attrInfo.attrName"
							:icon="Plus"
							@click="toAddAttrValue"
							>添加属性值</el-button
						>
						<el-button @click="isShowAttrList = true">取消</el-button>
					</el-form-item>
				</el-form>
				<el-table border :data="attrInfo.attrValueList" style="margin: 10px 0">
					<el-table-column
						label="序号"
						type="index"
						align="center"
						width="80"
					></el-table-column>
					<el-table-column label="属性值名称">
						<template v-slot="{ row, $index }">
							<el-input
								ref="inputRef"
								size="small"
								v-model="row.valueName"
								v-show="row.isShowInput"
								placeholder="请输入属性值"
								@blur="toDeleteCurrentRow(row, $index)"
							/>
							<span
								v-show="!row.isShowInput"
								style="display: inline-block; width: 100%"
								@dblclick="toEditValueName(row, $index)"
								>{{ row.valueName }}</span
							>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="280">
						<template v-slot="{ row, $index }">
							<el-popconfirm
								confirm-button-text="确定"
								cancel-button-text="取消"
								:icon="InfoFilled"
								icon-color="#626AEF"
								title="确定要删除此条属性吗?"
								@confirm="toRemoveAttrValue($index)"
							>
								<template #reference>
									<el-button
										title="删除"
										type="danger"
										size="small"
										:icon="Delete"
									></el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<el-button
					type="primary"
					:disabled="!attrInfo.attrValueList.length"
					@click="toSaveAttrInfo"
					>保存</el-button
				>
				<el-button @click="isShowAttrList = true">取消</el-button>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts">
export default {
	name: 'SAttr',
}
</script>

<script lang="ts" setup>
import CategorySelector from '@/components/CategorySelector/index.vue'
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue'
import { ref, reactive, watch, nextTick } from 'vue'
import { useCategoryListStore } from '@/stores/categoryList'
import {
	reqGetAttrListData,
	reqDeleteAttrInfo,
	reqSaveOrUpdateAttrInfo,
} from '@/api/product/attr'
import { ElMessage, type InputInstance } from 'element-plus'
import type {
	AttrInfoModel,
	AttrListModel,
	AttrValueInfoModel,
} from '@/api/product/model/attrModel'

const attrList = ref<AttrListModel>([])
const inputRef = ref<InputInstance[]>([])
const isShowAttrList = ref(true)
const categoryStore = useCategoryListStore()
const attrInfo = reactive<AttrInfoModel>({
	attrName: '',
	attrValueList: [],
	categoryId: -1,
	categoryLevel: 3,
})
// 获取品牌列表数据
const getAttrListData = async () => {
	const { category1Id, category2Id, category3Id } = categoryStore
	const result = await reqGetAttrListData({
		category1Id,
		category2Id,
		category3Id,
	})
	attrList.value = result
}
watch(
	() => categoryStore.category3Id,
	async (category3Id) => {
		if (!category3Id) {
			attrList.value = []
			return
		}
		getAttrListData()
	},
	{ immediate: true }
)
// 确认删除
const confirmEvent = async (attrId: number) => {
	await reqDeleteAttrInfo(attrId)
	ElMessage.success('删除成功！')
	getAttrListData()
}
// 取消删除
const cancelEvent = () => {
	console.log('cancel')
}
// 添加属性
const toAddAttrValue = () => {
	attrInfo.attrValueList.push({ valueName: '', isShowInput: true })
	nextTick(() => {
		inputRef.value[attrInfo.attrValueList.length - 1].focus()
	})
}
// 失去焦点删除空行
const toDeleteCurrentRow = (row: AttrValueInfoModel, index: number) => {
	if (!row.valueName.trim()) return attrInfo.attrValueList.splice(index, 1)
	row.isShowInput = false
}
// 更改属性值
const toEditValueName = (row: AttrValueInfoModel, index: number) => {
	row.isShowInput = true
	nextTick(() => {
		inputRef.value[index].focus()
	})
}
// 删除属性值
const toRemoveAttrValue = (index: number) => {
	attrInfo.attrValueList.splice(index, 1)
	ElMessage.success('属性删除成功！')
}
// 添加或更新平台属性
const toSaveAttrInfo = async () => {
	attrInfo.categoryId = categoryStore.category3Id as number
	await reqSaveOrUpdateAttrInfo(attrInfo)
	ElMessage({
		type: 'success',
		message: '操作平台属性成功!',
	})
	isShowAttrList.value = true
	if (!attrInfo.id) {
		getAttrListData()
	}
}
// 清除原始数据
const toAddAttrInfo = () => {
	isShowAttrList.value = false
	Object.assign(attrInfo, { attrName: '', attrValueList: [] })
	delete attrInfo.id
}

// 编辑时数据回显
const toEditAttrInfo = (row: AttrInfoModel) => {
	isShowAttrList.value = false
	Object.assign(attrInfo, row)
}
</script>

<style scoped></style>
